/**
 * 组件代码
 */
Vue.component('comSougnTable', {
    name: 'comSougnTable',
    props: ['config', 'data'],
    data: function () {
        return {
            title: [],
            content: [],
            titleStyle: {
                fontSize: "14px",
                color: "#eee",
                lineHeight: "14px",
                backgroundColor: "#eee",
                height:"20px",
                width: "0px",
                display: "block",
                float: 'float',
                textAlign:'left'
            },
            contentStyle: {
                fontSize: "14px",
                color: "#eee",
                lineHeight: "14px",
                backgroundColor: "#eee",
                height:"20px",
                width: "0px",
                display: "block",
                float: 'float',
                textAlign:'left'
            }
        }
    },
    computed: {
        myConfig: function () {
            var data = {};
            for (var item of this.config) {
                data[item.id] = item.value;
            }
            var contentStyle = {
                fontSize: data.contentFontSize + 'px',
                color: data.contentColor,
                lineHeight: data.contentLineHeight + 'px',
                backgroundColor: data.contentbgcColor,
                height: data.contentHeight + 'px',
                width: 'calc(100% / ' + this.title.length + ')',
                display: "block",
                float: 'left',
                textAlign:data.contentTextAlign
            }
            var titleStyle = {
                fontSize: data.titleFontSize + 'px',
                color: data.titleColor,
                lineHeight: data.titleLineHeight + 'px',
                backgroundColor: data.bgcColor,
                height: data.titleHeight + 'px',
                width: 'calc(100% / ' + this.title.length + ')',
                display: "block",
                float: 'left',
                textAlign:data.titleTextAlign
            }
            Object.assign(this.contentStyle,contentStyle);
            Object.assign(this.titleStyle,titleStyle);
            return data;
        },
    },
    watch: {
        data: function (oldValue, newValue) {
            this.dataChange();
        }
    },
    mounted() {
        this.dataChange();
    },
    methods: {
        dataChange: function () {
            this.title = window.getValue(this.myConfig.title).reduce(function (a, b) {
                return a.concat(b)
            });
            this.content = window.getValue(this.myConfig.content);
        }
    },
    template: `<div :style="myConfig">
    <div class="title">
        <div v-for="item of title" :style="titleStyle">{{item}}</div>
    </div>
    <div>
        <div v-for="item of content">
            <div v-for="el of item" :style="contentStyle">{{el}}</div>
        </div>
    </div>
</div>`,
});
/**
 * 配置项
 * @type {{name: string, id: string, type: string, value: string}[]}
 */
var comSougnTableConfig = [{
    name: "表格头",
    type: "data",
    value: "",
    id: "title"
}, {
    name: "表格头字体颜色",
    type: "color",
    value: "#eee",
    id: "titleColor"
}, {
    name: "表格头背景色",
    type: "color",
    value: "#eee",
    id: "bgcColor"
}, {
    name: "表格头字体大小",
    type: "size",
    value: 20,
    id: "titleFontSize"
}, {
    name: "表格头文字对齐方式",
    type: "select",
    value: 'left',
    config: [
        {
            value: 'left',
            label: '左对齐'
        },
        {
            value: 'center',
            label: '居中'
        }, {
            value: 'right',
            label: '又对齐'
        }],
    id: "titleTextAlign"
}, {
    name: "表格头文字行高",
    type: "size",
    value: 20,
    id: "titleLineHeight"
}, {
    name: "表格头文字高度",
    type: "size",
    value: 20,
    id: "titleHeight"
}, {
    name: "内容字体颜色",
    type: "color",
    value: "#eee",
    id: "contentColor"
}, {
    name: "内容字体大小",
    type: "size",
    value: 20,
    id: "contentFontSize"
}, {
    name: "内容文字行高",
    type: "size",
    value: 20,
    id: "contentLineHeight"
}, {
    name: "内容",
    type: "data",
    value: "",
    id: "content"
}, {
    name: "内容文字高度",
    type: "size",
    value: 20,
    id: "contentHeight"
}, {
    name: "内容文字对齐方式",
    type: "select",
    value: 'left',
    config: [
        {
            value: 'left',
            label: '左对齐'
        },
        {
            value: 'center',
            label: '居中'
        }, {
            value: 'right',
            label: '又对齐'
        }],
    id: "contentTextAlign"
}]
